<template>
  <div>
    <!-- 门店页 -->
    <div class="content">
      <div class="content-top">
        <div>
          <h1>查找门店</h1>
          <div>
            <input type="text" class="search" v-model="value">
            <button @click="keyUpSearch">
              搜索
            </button>
          </div>
        </div>
        <!-- 弹出框 -->
        <!-- <el-drawer class="drawer" direction="ttb" title="我是标题" :visible.sync="keyUpSearch" :with-header="false"
        >
          <span>请输入城市</span>
        </el-drawer> -->
      </div>

      <div class="content-bottom">
        <!-- 进入门店显示内容 -->
        <div class="content1" v-show="isShowing">
          <h3>魅可定制美妆</h3>
          <div>
            <img src="https://www.maccosmetics.com.cn/media/export/cms/locator/STORES_MUS_TOUT.jpg" alt="" />
            <div class="introduce">

              <div></div>
              <p>
                魅可作为专业彩妆品牌，提供免费的现场美妆示范
                和需提前预约的定制美妆及美妆教学服务。我们技巧高超的彩妆师都通过严格的资格认证。他们会根据不同的个体特征提供个性化的服务，定制与众不同的妆容效果，突显独特的个性色彩。
              </p>
              <div>了解更多</div>
            </div>
          </div>
        </div>

        <!-- 点击搜索 ，显示地图界面 -->
        <div v-show="isHide" class="list">
          <!-- 地图 -->
          <div id="content2"></div>

          <!-- 门店列表 -->
          <div class="store-container">
            <div class="store-list">
              <h2>门店</h2>
              <div class="up">
                <el-select v-model="type" placeholder="请选择">
                  <el-option v-for="item in options" :key="item.id" :label="item.type" :value="item.type" class="">
                  </el-option>
                </el-select>
              </div>
              <!--  -->
              <div class="down" v-for="s in stores" :key="s.id">
                <div class="num">{{ s.aid }}</div>
                <div class="msg">
                  <div class="adress">
                    <span>{{ s.offline_name }}</span>
                    <span>{{ s.address }}</span>
                    <span>{{ s.city }}</span>
                    <span>{{ s.phone }}</span>
                  </div>
                  <div class="adr">
                    <div class="location">
                      <span>魅可定制美妆</span>
                      <span>查看位置</span>
                    </div>
                    <div class="remove">
                      {{ s.latitude }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader'

export default {
  data() {
    return {
      value: '',//搜索框默认值
      isShowing: true, //默认显示页面
      isHide: false,  //地图页面隐藏
      map: null, // 保存地图对象
      marker: null, // 当前选中的坐标点
      stores: [],
      type: '', //初始值
      options: [
        { id: 1, type: '线下门店' },
        { id: 2, type: '柜台' }
      ]
    }
  },
  methods: {
    // 定位坐标
    location(x, y) {
      console.log(x, y);

      // 清除旧的点标记
      // this.map.remove(this.marker);
      // 地图画面定位
      this.map.setCenter([x, y])
      // 地图上增加点标记
      if(this.marker) {
        this.marker.setPosition([x, y])
      } else {
        this.marker = new AMap.Marker({
          position: [x, y]
        })
      }
      this.map.add(this.marker);
      // 缩放地图
      this.map.setZoom(13)
    },
    // 加载地图
    onLoading() {
      window._AMapSecurityConfig = {
        securityJsCode: '0b7fff62bb4d6f79bae15c1a1483e327',
      }
      AMapLoader.load({
        // 申请好的Web端开发者Key，首次调用 load 时必填
        "key": "7bfbe3ab215345f405c23b5eed760ca8",
        "version": "2.0",// 指定要加载的 JSAPI 的版本
        "plugins": ['AMap.Geocoder'], // 需要使用的的插件列表
      }).then((AMap) => {
        this.map = new AMap.Map('content2');
        this.map.setZoom(13)
      }).catch(e => {
        console.log(e);
      })
    },
    // 点击搜索，发送请求，并显示地图和定位坐标
    keyUpSearch() {
      if (!this.value.length) {
        this.$message('请输入内容');
      } else{
        console.log(this.value);
        this.isShowing = false,
        this.isHide = true,
        // 通过店名模糊查询
        this.$http.storeApi. queryLikeName({offline_name:this.value}).then(res => {
          this.stores = res.data.data
          console.log(this.stores)

          let { latitude, longitude } = this.stores[0];
          this.location(latitude, longitude);
        })          
      }
    },
  },
  mounted () {
    // 页面挂载后加载地图（不显示）
    this.onLoading()
  },
}
</script>

<style lang="scss" scoped>
.content {
  margin-bottom: 664px;
  width: 100%;
  height: 500px;

  //查找门店
  .content-top {
    height: 500px;
    background-image: url(https://www.maccosmetics.com.cn/media/export/cms/locator/storesPowellSt.jpg);
    background-size: 100% 500px;
    position: relative;
// 弹出框样式
    // .drawer {
    //   position: absolute;
    //   top: 350px;
    //   left: 0;
    //   span{
    //     display: block;
    //     text-align: center;
    //     font-size: 18px;
    //   }
    // }
    >div {
      text-align: center;

      h1 {
        padding-top: 150px;
        color: #fff;
        font-size: 36px;
      }
      div {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 10px;
        .search {
          width: 350px;
          height: 60px;
          padding: 50px 0;
          box-sizing: border-box;
          padding: 10px;
          outline: none;
          font-size: 20px;
        }


        button {
          margin-left: 5px;
          width: 228px;
          height: 62px;
          background-color: black;
          color: #fff;
          font-size: 15px;
        }
      }
    }
  }

  // 魅可定制美妆
  .content-bottom {
    // position: relative;

    .content1 {
      margin: 20px 0;

      &.active {
        display: none;
      }

      h3 {
        text-align: center;
      }

      >div {
        position: relative;

        >img {
          display: block;
          width: 100%;
          height: 600px;
        }

        div.introduce {
          width: 650px;
          height: 250px;
          position: absolute;
          top: 180px;
          left: 50%;
          transform: translate(-325px);

          div:first-child {
            margin: 0 auto;
            width: 260px;
            height: 70px;
            background: url(https://www.maccosmetics.com.cn/media/export/cms/locator/makeup-services.png) no-repeat;
          }

          p {
            margin-top: 20px;
            color: #fff;
          }

          div:last-child {
            margin: 30px auto;
            width: 228px;
            height: 60px;
            text-align: center;
            line-height: 60px;
            border: 1px solid #fff;
            color: #fff;
            font-size: 18px;
          }
        }
      }
    }

    > .list {
      display: flex;
      position: relative;

      // 地图模块
      #content2 {
        flex: 1;
        height: 800px;
        // position: fixed;
        overflow: auto;
      }
      // 门店信息
      .store-container {
        width: 350px;
        height: 800px;
        background-color: #fff;
        position: absolute;
        right: 0;
        z-index: 99;
        overflow: scroll;
  
        .store-list {
          padding: 20px 0;
  
          h2 {
            margin-left: 15px;
          }
  
          .up {
            margin: 20px;
          }
  
          .down {
         
            padding: 20px 10px;
            font-size: 18px;
            display: flex;
            justify-content: space-between;
            border-bottom: 1px solid #ccc;
  
            &:hover {
              background-color: #ccc;
  
            }
  
            .msg {
  
              .adress {
                display: flex;
                flex-direction: column;
              }
  
              .adr {
                display: flex;
                justify-content: space-between;
                margin-top: 20px;
  
                .location {
                  display: flex;
                  flex-direction: column;
                }
              }
            }
  
          }
  
        }
  
      }
    }
  }
}
</style>
